<template>
  <div class="product-detail-container">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else-if="productDetail" class="product-detail">
      <div class="product-images">
        <img v-if="productDetail && productDetail.productSpu && productDetail.productSpu.mainImage" :src="productDetail.productSpu.mainImage" alt="商品主图" class="main-image">
        <div v-else class="no-image">暂无图片</div>
      </div>
      <div class="product-info">
        <div class="info-header">
          <h1 class="product-name">{{ productDetail?.productSpu?.spuName || '未知商品' }}</h1>
          <div class="product-status" :class="{ 'status-active': productDetail?.productSpu?.status === 1, 'status-inactive': productDetail?.productSpu?.status === 0 }">{{ productDetail?.productSpu?.status === 1 ? '上架' : '下架' }}</div>
        </div>
        <p class="product-description">{{ productDetail?.productSpu?.description || '暂无描述' }}</p>
        <div class="product-meta">
          <div class="product-price">¥{{ productDetail?.productSpu?.unitPrice || '0.00' }}</div>
          <div class="product-sales">销量: {{ productDetail?.productSpu?.salesCount || 0 }}</div>
          <div class="product-supplier">供应商名称: {{ productDetail?.productSpu?.supplierName || '未知供应商' }}</div>
        </div>
        <div class="product-skus">
          <h3>商品规格</h3>
          <div v-if="productDetail?.skus && productDetail.skus.length > 0" class="skus-list">
            <div v-for="sku in productDetail.skus" :key="sku.skuId" class="sku-item">
              <div class="sku-name">{{ sku.skuName }}</div>
              <div class="sku-price">¥{{ sku.unitPrice }}</div>
              <div class="sku-stock">库存: {{ sku.stockQuantity }} {{ productDetail?.productSpu?.unit || '个' }}</div>
              <div v-if="sku.attributes" class="sku-attributes">
                <div v-for="(value, key) in JSON.parse(sku.attributes)" :key="key">{{ key }}: {{ value }}</div>
              </div>
            </div>
          </div>
          <div v-else class="no-skus">暂无规格信息</div>
        </div>

        <div class="product-attributes">
          <h3>商品属性</h3>
          <div v-if="productDetail?.attributes && productDetail.attributes.length > 0" class="attributes-list">
            <div v-for="attr in productDetail.attributes" :key="attr.attrId" class="attribute-item">
              <div class="attribute-name">{{ attr.name }}</div>
              <div class="attribute-values">{{ attr.values.split(',').join('、') }}</div>
            </div>
          </div>
          <div v-else class="no-attributes">暂无属性信息</div>
        </div>

        <div class="product-features">
          <h3>商品特点</h3>
          <div v-if="productDetail?.productFeatures" class="features-content">{{ productDetail.productFeatures }}</div>
          <div v-else class="no-features">暂无商品特点信息</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getProductDetails } from '@/api/productApi';

export default {
  name: 'ProductDetail',
  data() {
    return {
      productId: null,
      productDetail: null,
      loading: false,
      error: null,
      selectedSku: null
    };
  },
  created() {
    // 从路由参数中获取商品ID
    this.productId = this.$route.params.id;
    console.log('获取到的商品ID:', this.productId);
    if (this.productId) {
      this.fetchProductDetail();
    } else {
      this.error = '商品ID不存在';
      console.error('商品ID不存在');
    }
  },
  methods: {
    async fetchProductDetail() {
      console.log('开始获取商品详情，ID:', this.productId);
      this.loading = true;
      this.error = null;
      try {
        const response = await getProductDetails(this.productId);
        console.log('API响应:', response);
        if (response && response.data) {
          this.productDetail = response.data;
          console.log('商品详情数据:', this.productDetail);
          console.log('商品属性数据:', this.productDetail.attributes);
          console.log('商品规格数据:', this.productDetail.skus);
          // 默认选择第一个SKU
          if (this.productDetail.skus && this.productDetail.skus.length > 0) {
            this.selectedSku = this.productDetail.skus[0];
          }
        } else {
          this.error = 'API返回数据格式不正确';
          console.error('API返回数据格式不正确:', response);
        }
      } catch (err) {
        this.error = '获取商品详情失败';
        console.error('获取商品详情失败:', err);
      } finally {
        this.loading = false;
        console.log('加载完成，productDetail:', this.productDetail);
      }
    },
    selectSku(sku) {
      this.selectedSku = sku;
    }
  }
};
</script>

<style scoped>
.product-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.loading, .error {
  text-align: center;
  padding: 50px 0;
  font-size: 18px;
}

.error {
  color: #ff7a45;
}

.product-detail {
  display: flex;
  gap: 30px;
}

.product-images {
  flex: 1;
}

.main-image {
  width: 100%;
  max-height: 500px;
  object-fit: contain;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.main-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.product-info {
  flex: 1;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-name {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.product-description {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.product-price {
  font-size: 32px;
  color: #3B82F6;
  margin-bottom: 20px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.product-attributes,
.product-skus {
  margin-bottom: 20px;
}

.product-attributes h3,
.product-skus h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.product-attributes ul {
  list-style: none;
  padding: 0;
}

.product-attributes li {
  margin-bottom: 5px;
  color: #666;
}

.sku-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sku-options button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sku-options button:hover {
  border-color: #3B82F6;
  background-color: #f0f7ff;
}

.sku-options button.active {
  border-color: #3B82F6;
  background-color: #f0f7ff;
  color: #3B82F6;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.add-to-cart, .buy-now {
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.add-to-cart:hover {
  background-color: #e0effe;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.buy-now {
  background-color: #3B82F6;
  color: white;
}

.buy-now:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.add-to-cart {
  background-color: #fff;
  border: 1px solid #3B82F6;
  color: #3B82F6;
  color: #1890ff;
}

.buy-now {
  background-color: #ff4d4f;
  color: #fff;
}

.add-to-cart:hover {
  background-color: #e6f7ff;
}

.buy-now:hover {
  background-color: #ff7875;
}

.product-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}

.status-active {
  background-color: #f0f9eb;
  color: #52c41a;
  border: 1px solid #e6f7ff;
}

.status-inactive {
  background-color: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #fff1f0;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.product-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.product-features {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.features-content {
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  line-height: 1.6;
  color: #333;
}

.no-features {
  color: #999;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.product-features h3 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #333;
}

.product-features ul {
  padding-left: 20px;
}

.product-features li {
  margin-bottom: 8px;
  color: #666;
  list-style-type: disc;
}
</style>